<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .qd{
            width: 750px;
            height: 1624px;
            background-image: url(./qd.png);
            margin: auto;
            margin-top: 50px;
            display: none;
        }
        .sjhdl{
            width: 750px;
            height: 1624px;
            margin: auto;
            margin-top: 50px;
        }
        .tb{
            float: right;
        }
        .s{
            font-size: 30px;
        }
        .kd{
            text-align: center;
        }
        .sjh span{
            float: right;
        }
        .sjh{
            margin-top: 80px;
            font-size: 50px;
        }
        .sj{
            padding-top: 10px;
            margin-left: 10px;
        }
        h1 span{
            color: orangered;
            font-size: 30px;
            margin-top: 10px;
        }
        input{
            width: 100%;
            height: 50px;
            border: 0;
            border-bottom:1px solid #f1f3f4 ;
            font-size: 30px;
            margin-top: 50px;
            margin-bottom: 30px;
        }
        .yzmp{
            position: relative;
            margin-bottom: 30px;
        }
        .hqyzm{
            position: absolute;
            right: 0;
            top: 55px;
            width: 200px;
            height: 30px;
            font-size: 20px;
            background-color: transparent;
            border: 0;
        }
        .dl{
            margin-top: 50px;
            width: 100%;
            height: 80px;
            background-color: #ef4f3f;
            font-size: 30px;
            border: 0;
            border-radius: 35px;
            color: #fff;
        }
        .sjhpd{
            color: #ef4f3f;
            font-size: 25px;
            opacity: 0;
        }
        .yzmpd{
            color: #ef4f3f;
            font-size: 25px;
            opacity: 0;
        }
    </style>
</head>
<body>
    <div class="qd"></div>
    <div class="sjhdl">
        <p class="s">
            <span class="time">9:41</span>
            <span class="tb">
                <span class="iconfont icon-signal-fill"></span>
                <span class="iconfont icon-WIFI"></span>
                <span class="iconfont icon-dianchi"></span>
            </span>
        </p>
        <h1 class="kd">神领快递</h1>
        <h1 class="sjh">手机号登录<span class="iconfont icon-triangle-right sj"></span><span class="zd" onclick="zd()">账号登录 </span></span></h1>
        <input type="text" placeholder="请输入手机号" class="sjhk"><br><span class="sjhpd">手机号输入有误！请重新输入</span>
        <p class="yzmp"><input type="text" placeholder="请输入验证码" class="yzmk"><button class="hqyzm" onclick="hq()">获取验证码</button><br><span class="yzmpd">验证码输入有误！请重新输入</span></p>
        <button class="dl">登录</button>
    </div>
</body>
</html>
<script>
    var sjh=document.querySelector('.sjhk')
    var yzmk=document.querySelector('.yzmk')
    var dl=document.querySelector('.dl')
    var sjhsp=document.querySelector('.sjhpd')
    var yzmsp=document.querySelector('.yzmpd')
    var sjhdl=document.querySelector('.sjhdl')
    var qd=document.querySelector('.qd')
   
    function yz(phoneNumber){
       return /^1\d{10}$/.test(phoneNumber)
    }
    function yzm(max,min){
        return Math.floor(Math.random()*max-min+1)+min
    }
    var sjs=yzm(9999,1000)
    function hq(){
        alert(sjs)
    }
    dl.onclick=function(){
        if(yz(sjh.value.trim())==false){
            sjhsp.innerHTML='手机号输入有误！请重新输入'
            sjhsp.style.opacity='1' 
        }else if(yzmk.value==sjs){
            yzmsp.innerHTML='验证码输入有误！请重新输入'
            yzmsp.style.opacity='1' 
        }else{
            sjhsp.style.opacity='0'
        }
    }
    function zd(){
        location.href='./04.html'
    }
</script>